<template>
  <div class="product">
    <div class="flex-between">
      <div class="flex ">
        <div>
          <span class="t-14 margin-right-10">产品类型</span>
          <el-select v-model="params.type"
                     @change="queryShop"
                     placeholder="请选择产品类型">
            <el-option v-for="item in productTypeMap"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value" />
          </el-select>
        </div>
        <div>
          <span class="t-14 margin-right-10 margin-left-10">所属系列</span>
          <el-select v-model="params.series"
                     clearable
                     @change="queryShop"
                     placeholder="请选择所属系列">
            <el-option v-for="item in seriesMap"
                       :key="item.id"
                       :label="item.val"
                       :value="item.id" />
          </el-select>
        </div>
      </div>
      <div>
        <div>
          <el-button type="primary"
                     size="small"
                     @click="batchSetIsEnabled(1)">上架</el-button>
          <el-button type="danger"
                     size="small"
                     @click="batchSetIsEnabled(0)">下架</el-button>

          <el-button type="primary"
                     size="small"
                     @click="addProducet">添加产品</el-button>
        </div>
      </div>
    </div>

    <el-table :data="list"
              v-loading="loading"
              ref="multipleTable"
              @row-click="onChaKan"
              @selection-change="handleSelectionChange"
              row-key="id"
              :tree-props="{ children: 'goodsList', hasChildren: 'hasChildren' }">
      >
      <el-table-column type="selection"
                       width="55"></el-table-column>
      <el-table-column label="类型"
                       min-width="50"
                       align="left"
                       :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span v-if="scope.row.type =='2' ">烟弹</span>
          <span v-else-if="scope.row.type == '1' ">烟杆</span>
          <span v-else>''</span>
        </template>
      </el-table-column>
      <el-table-column label="产品名称"
                       align="left"
                       :show-overflow-tooltip="true">
        <template slot-scope="scope">{{ scope.row.name }}</template>
      </el-table-column>
      <el-table-column label="所属系列"
                       align="left"
                       :show-overflow-tooltip="true">
        <template slot-scope="scope">{{ scope.row.seriesName }}</template>
      </el-table-column>
      <el-table-column label="最低价"
                       min-width="50"
                       align="left"
                       :show-overflow-tooltip="true">
        <template slot-scope="scope">{{ scope.row.minPrice }}</template>
      </el-table-column>
      <el-table-column label="最高价"
                       min-width="50"
                       align="left"
                       :show-overflow-tooltip="true">
        <template slot-scope="scope">{{ scope.row.maxPrice }}</template>
      </el-table-column>
      <el-table-column label="计数单位"
                       min-width="60"
                       align="left"
                       :show-overflow-tooltip="true">
        <template slot-scope="scope">{{ scope.row.unit }}</template>
      </el-table-column>
      <el-table-column label="产品简介"
                       align="left"
                       :show-overflow-tooltip="true">
        <template slot-scope="scope">{{ scope.row.descs }}</template>
      </el-table-column>

      <el-table-column align="center"
                       prop="created_at"
                       label="操作"
                       min-width="120">
        <template slot-scope="scope">
          <el-tooltip class="item"
                      effect="dark"
                      content="编辑产品信息"
                      placement="bottom-end">
            <el-button type="text"
                       @click.stop="editProduct(  scope.row)"
                       icon="iconfont icon-bianji"></el-button>
          </el-tooltip>

          <el-tooltip class="item"
                      v-if="scope.row.type=='2'"
                      effect="dark"
                      content="添加烟弹商品"
                      placement="bottom-end">
            <el-button type="text"
                       @click.stop="handleAddGoods(scope.$index, scope.row,2)"
                       icon="iconfont icon-icon-test1"></el-button>
          </el-tooltip>

          <el-tooltip class="item"
                      v-else-if="scope.row.type == '1' "
                      effect="dark"
                      content="添加烟杆商品"
                      placement="bottom-end">
            <el-button type="text"
                       @click.stop="handleAddGoods(scope.$index, scope.row,1)"
                       icon="iconfont icon-icon-test1"></el-button>
          </el-tooltip>

          <el-tooltip class="item"
                      effect="dark"
                      content="删除"
                      placement="bottom-end">
            <el-button type="text"
                       @click.stop="deleteProduct(scope.row)"
                       icon="iconfont icon-shanchu1"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <div class="bottom">
      <div ref="bottomBtn"
           class="bottomBtn">
        <slot />
      </div>
      <el-pagination class="pagination"
                     :current-page="params.current"
                     :page-size="params.size"
                     background
                     layout="total  , prev, pager, next, jumper"
                     :total="total"
                     @current-change="handleCurrentChange" />
    </div>
    <el-dialog title="商品详情"
               custom-class="detail-confirm"
               :visible.sync="dialogVisible"
               width="80%"
               center
               :before-close="handleClose">
      <GoodsDetail v-if="dialogVisible"
                   :goods-info="goodsInfo" />
    </el-dialog>
  </div>
</template>

<script>
import bottombtn from "../product/shoplistbottomBtn";
import { queryProductList, removeProduct } from "../../services/product.js";
import { mapState } from 'vuex'

export default {
  name: "ProductList",
  components: {
    bottombtn
  },
  data () {
    return {
      loading: false,
      list: [],
      params: {
        current: 1, // 页码
        size: 10, // 条数
        goodsName: "", // 商品名称
        goodsCode: "", // 商品名称
        supplierId: "5",
        minMarkPrice: "", // 最低价
        maxMarkPrice: "", // 最高价
        i1CategoryId: "", // 一级分类
        i2CategoryId: "", // 二级分类
        i3CategoryId: "", // 三级分类
        status: "", // 状态
        type: "",
        series: ""
      },
      total: 0, // 总条数
      dialogVisible: false,
      goodsInfo: {}, // 商品详情
      productTypeMap: [
        {
          value: "",
          label: "全部",
        },
        {
          value: "2",
          label: "烟弹",
        },
        {
          value: "1",
          label: "烟杆",
        }
      ],
      selectedGoodsList: [], // 已选中商品列表
    };
  },
  computed: {
    ...mapState('dictionary', ['seriesMap']),
  },
  created () {
    this.getProductList()  // 获取商品列表
    this.$store.dispatch('dictionary/dispatchSeriesMap') //获取产品系列字典
  },
  methods: {
    // 添加对应商品
    handleAddGoods (index, row, type) {
      this.addGoodsAction(row);
    },
    addGoodsAction (data) {
      if (data.type === 2) {
        this.$router.push({
          path: "/yanDanGoodsEdit",
          query: {
            productId: data.id,
            productType: data.type
          }
        })
      } else if (data.type === 1) {
        this.$router.push({
          path: "/yanGanGoodsEdit",
          query: {
            productId: data.id,
            productType: data.type
          }
        })
      }
    },
    // 查看详情
    onChaKan (row) {
      this.$store.commit('product/changeProductDetail', row)
      this.$router.push('/productDetail')
    },
    // 获取商品列表
    async getProductList () {
      this.loading = true
      const res = await queryProductList(this.params);
      if (res.code === 0) {
        res.data.records.forEach((item) => {
        });
        this.list = res.data.records;
        this.total = res.data.total;
        this.loading = false
      } else {
        this.$message.warning(res.msg)
        this.loading = false
      }
    },

    // 商品上下架接口
    async setGoodsIsEnabled (params) {
      const res = await setGoodsIsEnabled(params);
      if (res.code === 0) {
        this.getProductList();
        this.$message({
          message: "状态修改成功",
          type: "success",
        });
      }
    },
    // 商品批量上下架
    batchSetIsEnabled (type) {
      if (!this.selectedGoodsList.length) {
        return this.$message({
          type: "warning",
          message: "请选择商品后再操作!",
        });
      }

      let list;
      // 草稿状态的商品不能上架
      list = this.selectedGoodsList.filter((item) => item.status === "valid");
      if (!list.length) {
        return this.$message({
          type: "warning",
          message: "商品需重新审核后才能上架!",
        });
      }
      // 已上下架的商品不能重复操作
      list = list.filter((item) => item.isEnable !== type);
      if (!list.length) {
        return this.$message({
          type: "warning",
          message: `已${type === 1 ? "上架" : "下架"}商品不能重复${type === 1 ? "上架" : "下架"
            }!`,
        });
      }
      const productIds = list.map((item) => item.productId);
      this.setGoodsIsEnabled({
        isEnable: type,
        productIds: productIds,
      });
    },
    // 商品上下架
    setIsEnabled (row, type) {
      // type (1.上架; 0.下架; 3.撤回申请)
      this.$confirm("是否继续该操作?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let productId = row.productId;
          this.setGoodsIsEnabled({
            isEnable: type,
            productIds: [productId],
          });
        })
        .catch(() => { });
    },
    handleClose (done) {
      done();
    },
    // 查询商品
    queryShop () {
      this.params.current = 1;
      this.getProductList();
    },
    // 添加烟弹
    addProducet () {
      this.$router.push({
        path: "/productEdit",
        query: {
          isEdit: 0
        }
      });
    },
    // 点击编辑产品
    editProduct (row) {
      this.$store.commit('product/changeProductDetail', row)
      this.$router.push({
        path: "/productEdit",
        query: {
          isEdit: 1,
        }
      });
    },
    // 点击删除产品
    deleteProduct (row) {
      this.$confirm('此操作将永久删除该产品, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await removeProduct(row.id)
        if (res.code == 0) {
          this.$message.success('删除成功')
          this.getProductList()
        } else {
          this.$message.warning(res.msg)
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 多选
    handleSelectionChange (val) {
      this.selectedGoodsList = val;
    },
    // 条数change
    // handleSizeChange (val) {
    //   this.params.size = val;
    //   this.getProductList();
    // },
    // 分页change
    handleCurrentChange (val) {
      this.params.current = val;
      this.getProductList();
    }
  },
};
</script>
<style lang="scss" scoped>
.product {
}
</style>
